<template>
  <div class="search-select">
    <div
      v-for="item in options"
      :key="item.label"
      :title="item.label"
      :class="{ active: active?.value === item.value }"
      class="search-option"
      @mousedown="emit('change', item)"
      @mouseover="active = item">
      {{ item.label }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, toRef, watchEffect } from 'vue'

import type { LabelValue } from '../../../types'
import { useActiveKeyDown } from '../hooks/useActiveKeyDown'

const props = defineProps<{
  options: LabelValue[]
}>()

const emit = defineEmits<{
  change: [value: LabelValue]
}>()

const active = ref<LabelValue>()

useActiveKeyDown({
  active,
  options: toRef(() => props.options),
  enterFn: (item) => emit('change', item)
})

watchEffect(() => {
  active.value = props.options[0]
})
</script>
